// 封装echarts为vue插件
import echarts from 'echarts'

import 'echarts/map/js/china'
import 'echarts/map/js/province/beijing'
import 'echarts/map/js/province/shanghai'
import 'echarts/map/js/province/neimenggu'
import 'echarts/map/js/province/tianjin'
import 'echarts/map/js/province/xinjiang'
import 'echarts/map/js/province/hebei'
import 'echarts/map/js/province/henan'
import 'echarts/map/js/province/shandong'
import 'echarts/map/js/province/shanxi'
import 'echarts/map/js/province/jiangsu'
import 'echarts/map/js/province/jiangxi'
import 'echarts/map/js/province/jilin'
import 'echarts/map/js/province/gansu'
import 'echarts/map/js/province/guangdong'
import 'echarts/map/js/province/guangxi'
import 'echarts/map/js/province/guizhou'
import 'echarts/map/js/province/qinghai'
import 'echarts/map/js/province/xianggang'
import 'echarts/map/js/province/xizang'
import 'echarts/map/js/province/zhejiang'
import 'echarts/map/js/province/heilongjiang'
import 'echarts/map/js/province/ningxia'
import 'echarts/map/js/province/sichuan'
import 'echarts/map/js/province/yunnan'
import 'echarts/map/js/province/hubei'
import 'echarts/map/js/province/hunan'
import 'echarts/map/js/province/anhui'
import 'echarts/map/js/province/liaoning'
import 'echarts/map/js/province/taiwan'
import 'echarts/map/js/province/hainan'
import 'echarts/map/js/province/fujian'
import 'echarts/map/js/province/chongqing'
import 'echarts/map/js/province/shanxi1'
const install = function (Vue, options) {
  Object.defineProperties(Vue.prototype, {
    $myCharts: {
      get () {
        return {
          // 创建一个绘制中国地图的方法
          ChinaMap (id, data) {
            var myChart = echarts.init(document.getElementById(id))
            console.log(myChart)
            var option = {
              tooltip: {
                // 悬浮弹框
                triggerOn: 'click', // 提示框触发的条件
                enterable: true, // 鼠标是否可进入提示框浮层中，默认为false
                formatter (item) {
                  // item=下面serves里面的data里面的每一项
                  return `<a href=/city/${item.name} style=color:#fff>${item.name}：${item.value}人</a>`
                }
              },
              visualMap: [
                {
                  // 映射高亮颜色
                  orient: 'horizontal', // 水平的
                  type: 'piecewise', // 离散
                  bottom: 25,
                  left: 15,
                  textGap: 4,
                  itemGap: 4,
                  itemWidth: 20,
                  itemHeight: 15,
                  padding: 2,
                  textStyle: {
                    fontSize: 9
                  },
                  pieces: [
                    // 配置颜色区间
                    {
                      min: 0,
                      max: 0,
                      color: '#FFFFFF'
                    },
                    {
                      min: 1,
                      max: 9,
                      color: '#FAEBD2'
                    },
                    {
                      min: 10,
                      max: 99,
                      color: '#E9A188'
                    },
                    {
                      min: 100,
                      max: 499,
                      color: '#D56355'
                    },
                    {
                      min: 500,
                      max: 999,
                      color: '#BB3937'
                    },
                    {
                      min: 1000,
                      max: 10000,
                      color: '#772526'
                    },
                    {
                      min: 10000,
                      color: '#480F10'
                    }
                  ]
                }
              ],
              series: [
                {
                  name: '省',
                  type: 'map', // 地图  bar  line  map
                  map: 'china', // 中国地图 需要引入地图china.js
                  roam: false,
                  zoom: 1.2,
                  aspectScale: 0.75,
                  top: 40,
                  layoutCenter: ['50%', '50%'],
                  layoutSize: 380,
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 8
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      areaColor: 'rgba(0,255,236,0)',
                      borderColor: 'rgba(0,0,0,0.2)'
                    },
                    emphasis: {
                      // 选中的区域颜色及阴影效果等
                      areaColor: 'rgba(255,180,0,0.8)',
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 20,
                      borderWidth: 0
                    }
                  },
                  data: data
                }
              ]
            }
            myChart.setOption(option)
          },
          cityMap (id, cityname, data) {
            var myChart = echarts.init(document.getElementById(id))
            var option = {
              tooltip: {
                // 悬浮弹框
                triggerOn: 'click', // 提示框触发的条件
                enterable: true,
                formatter (data) {
                  // [{} ] data={}
                  return data.name
                }
              },
              visualMap: [
                {
                  // 映射高亮颜色
                  orient: 'horizontal', // 垂直
                  type: 'piecewise', // 离散
                  bottom: 0,
                  pieces: [
                    // 配置颜色区间
                    {
                      min: 0,
                      max: 0,
                      color: '#FFFFFF'
                    },
                    {
                      min: 1,
                      max: 10,
                      color: '#FDFDCF'
                    },
                    {
                      min: 10,
                      max: 100,
                      color: '#FE9E83'
                    },
                    {
                      min: 100,
                      max: 500,
                      color: '#E55A4E'
                    },
                    {
                      min: 500,
                      max: 10000,
                      color: '#4F070D'
                    }
                  ]
                }
              ],
              series: [
                {
                  name: '市',
                  type: 'map', // 地图
                  map: cityname, // 中国地图
                  roam: false,
                  zoom: 1.2,
                  aspectScale: 0.75,
                  top: 10,
                  layoutCenter: ['50%', '50%'],
                  layoutSize: 400,
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 8
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      areaColor: 'rgba(0,255,236,0)',
                      borderColor: 'rgba(0,0,0,0.2)'
                    },
                    emphasis: {
                      // 选中的区域颜色及阴影效果等
                      areaColor: 'rgba(255,180,0,0.8)',
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 20,
                      borderWidth: 0
                    }
                  },
                  data: data
                }
              ]
            }
            myChart.setOption(option)
          }
        }
      }
    }
  })
}

export default install
